<template>
  <div
    class="test"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#fff"
  >
    <!-- el-loading-spinner -->
    <!-- {{data}} -->
    <h4 style="font-size: 20px">
      数据来源于新浪、网易，以下数据{{ xinlang_data.times }}
    </h4>
    <h2 style="color: #2e8b57; font-size: 32px">中国疫情状况</h2>
    <!-- 境外输入表 -->
    <div class="jwsr">
      <div id="jwsr_bar" style="width: 600px; height: 400px"></div>
    </div>
    <!-- 今日变化 -->
    <div class="china_today_change">
      <div id="ct_change" style="width: 600px; height: 400px"></div>
    </div>
    <div class="ch_hit">
      <div id="ch_hit" style="width: 1200px; height: 350px"></div>
    </div>
    <div class="ch_hitday">
      <div id="ch_hitday" style="width: 1300px; height: 350px"></div>
    </div>
    <h2 style="color: #2e8b57; font-size: 30px">世界各国疫情状况</h2>
    <div class="wor_die">
      <div id="wor_die" style="width: 1300px; height: 350px"></div>
    </div>
    <el-button @click="toMap" class="btn">查看更多世界疫情详情</el-button>
  </div>
</template>

<style scoped>
.test >>> .el-loading-spinner {
  position: absolute;
  top: 20%;
}
.btn {
  width: 100%;
  font-size: 25px;
  font-weight: 800;
}
.jwsr {
  width: 50%;
  padding: 20px 15px 0 30px;
  display: inline-block;
}

.china_today_change {
  width: 50%;
  display: inline-block;
  padding: 20px 15px 0 10px;
}
.ch_hit {
  height: 330px;
  display: inline-block;
  padding: 5px 15px 0 10px;
}
.ch_hitday {
  height: 330px;
  display: inline-block;
  padding: 5px 15px 0 10px;
}
.wor_die {
  width: 100%;
  height: 380px;
  display: inline-block;
  /* padding: 5px 15px 0 10px; */
}
</style>

<script>
import axios from "@/http/axios";
import xl_data from "../../assets/xinlang.json";
import wg_data from "../../assets/wangyi.json";
export default {
  data() {
    return {
      res1: [],
      xinlang_data: xl_data.data,
      new_obj: [],
      wangyi_data: wg_data.data,
      loading: true,
      id_1: 0,
      id_2: 0,
    };
  },
  created() {
    // this.history_data();
    // this.findJson();
  },
  mounted() {
    setTimeout(() => {
      this.jwsrNum_bar();
      this.chto_change();
      this.his_line();
      this.hisday_line();
      this.world_day_die();
      // this.test();
    }, 2000);
    setTimeout(() => {
      this.end_lod();
    }, 2500);
    this.id_1 = setInterval(() => {
      this.jwsrNum_bar();
      this.his_line();
      this.world_day_die();
    }, 4000);
    this.id_2 = setInterval(() => {
      this.chto_change();
      this.hisday_line();
    }, 6000);
  },
  destroyed() {
    clearInterval(this.id_1);
    clearInterval(this.id_2);
  },
  // destroyed_2(){
  //   clearInterval(this.id_2);
  // },
  methods: {
    findJson() {
      axios.defaults.baseURL = "http://localhost:9528";
      axios.get("/test/news/wap/fymap2020_data.d.json").then((res) => {
        this.xinlang_data = res.data;
      });
    },
    history_data() {
      axios.defaults.baseURL = "http://localhost:9528";
      axios.get("/api/wuhan/app/data/list-total").then((res) => {
        this.wangyi_data = res.data;
      });
    },
    test() {
      var i = 0;
      for (i; i <= 10; i++) {
        if (this.data.otherlist.length < 5) {
          this.findJson();
          console.log("数据不全");
        }
      }
    },
    toMap(val) {
      this.$router.push({
        path: "/contrast/worldmap",
      });
    },
    jwsrNum_bar() {
      // 获取数据
      var dataAxis = [];
      var data = [];
      this.xinlang_data.jwsrTop.map((item) => {
        dataAxis.push(item.name);
        data.push(item.jwsrNum);
      });
      echarts.init(document.getElementById("jwsr_bar")).dispose();
      var myChart = echarts.init(document.getElementById("jwsr_bar"));
      var option = {
        title: {
          text: "境外输入Top",
          subtext: "十大地区累计数据",
          textStyle: {
            fontSize: 25,
          },
          subtextStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
          type: "category",
          data: dataAxis,
        },
        yAxis: {
          type: "value",
          data: data,
        },
        series: [
          {
            data: data,
            label: {
              show: true,
              position: "inside",
            },
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#8B3A3A" },
                { offset: 0.5, color: "#CD5555" },
                { offset: 1, color: "#FF6A6A" },
              ]),
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      };
      // Enable data zoom when user click bar.点击效果
      tooltip: {
        trigger: "axis";
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow"; // 默认为直线，可选为：'line' | 'shadow'
        }
        //
      }
      myChart.setOption(option);
    },
    chto_change() {
      echarts.init(document.getElementById("ct_change")).dispose();
      var myChart = echarts.init(document.getElementById("ct_change"));

      // 处理数据
      var xAxisData = [
        "累计确诊",
        "治愈",
        "死亡",
        "现有确诊",
        "境外输入",
        "无症状",
      ];
      var data1 = [],
        data2 = [];
      var res = this.wangyi_data.chinaTotal.today;
      data1.push(res.confirm, res.heal, res.dead, res.storeConfirm, res.input);
      res = this.wangyi_data.chinaTotal.total;
      data2.push(
        res.confirm,
        res.heal,
        res.dead,
        res.confirm - res.heal - res.dead,
        res.input
      );
      res = this.wangyi_data.chinaTotal.extData;
      data1.push(res.noSymptom);
      data2.push(res.incrNoSymptom);

      var option = {
        title: {
          text: "数据变化",
          textStyle: {
            fontSize: 25,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["今日变化", "累计数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "今日变化",
            type: "line",
            data: data1,
          },
          {
            name: "累计数据",
            type: "bar",
            data: [
              data2[0],
              data2[1],
              {
                value: data2[2],
                itemStyle: { color: "red" },
              },
              data2[3],
              data2[4],
              data2[5],
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    end_lod() {
      this.loading = false;
    },
    his_line() {
      echarts.init(document.getElementById("ch_hit")).dispose();
      var myChart = echarts.init(document.getElementById("ch_hit"));
      var x_data = ["2020-01-13", "2020-05-13", "2020-10-13", "2020-01-7"];
      var x_data = [];
      var his_data = [];
      this.wangyi_data.chinaDayList.map((item) => {
        his_data.push(item.total.confirm);
        x_data.push(item.date);
      });
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "2020-01-13至今中国累计确诊趋势",
          textStyle: {
            fontSize: 25,
          },
        },

        xAxis: {
          axisLine: { show: true },
          axisTick: { show: false },
          data: x_data,
          type: "category",
        },
        yAxis: {
          axisLine: { show: true },
          axisTick: { show: false },
          type: "value",
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "人数",
            type: "line",
            // showSymbol: false,
            // hoverAnimation: false,
            data: his_data,
          },
        ],
      };
      myChart.setOption(option);
    },
    hisday_line() {
      echarts.init(document.getElementById("ch_hitday")).dispose();
      var myChart = echarts.init(document.getElementById("ch_hitday"));
      var his_data = [];
      var x_data = [];
      this.wangyi_data.chinaDayList.map((item) => {
        his_data.push(item.today.confirm);
        x_data.push(item.date);
      });
      var option = {
        title: {
          text: "2020-01-13至今中国新增确诊趋势",
          textStyle: {
            fontSize: 25,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: x_data,
            axisLine: { show: true },
            axisTick: { show: false },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: { show: true },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "人数",
            type: "line",
            data: his_data,
          },
          // {
          //   name:'累计数据',
          //   type:'bar',
          //   data:[data2[0],data2[1],
          //   {
          //     value:data2[2],
          //     itemStyle:{color:'red'}
          //   },
          //   data2[3],data2[4],data2[5]
          //   ]
          // }
        ],
      };
      myChart.setOption(option);
    },
    world_day_die() {
      echarts.init(document.getElementById("wor_die")).dispose();
      var myChart = echarts.init(document.getElementById("wor_die"));
      var his_data = [];
      var x_data = [];

      for (var i = this.xinlang_data.otherhistorylist.length - 1; i >= 0; i--) {
        // console.log(arr[i]);
        his_data.push(this.xinlang_data.otherhistorylist[i].die);
        x_data.push(this.xinlang_data.otherhistorylist[i].date);
      }
      var arr = [],
        arr1 = [];
      arr = his_data.splice(0, 7);
      his_data = his_data.concat(arr);
      arr1 = x_data.splice(0, 7);
      x_data = x_data.concat(arr1);

      var option = {
        title: {
          text: "全球每日因疫情死亡人数",
          textStyle: {
            fontSize: 25,
          },
        },
        tooltip: {
          trigger: "axis",
          axis: "x",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: x_data,
            axisLine: { show: true },
            axisTick: { show: false },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            axisLine: { show: true },
            axisTick: { show: false },
          },
        ],
        legend: {
          data: ["人数"],
        },
        series: [
          {
            name: "人数",
            type: "line",
            data: his_data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>